<template>
  <div class="main">
    <div class="top">
      <img src="@/assets/svg/login.svg" />
    </div>
    <div class="log">
      <img src="@/assets/svg/ICO.svg" />
    </div>
    <van-form class="vanform" ref="form" @submit="onSubmit">
      <van-field
        v-model.number="userInfo.nameid"
        name="用户名"
        placeholder="请输入用户名"
      />
      <van-field
        @focus="changePsd"
        v-model.number="userInfo.password"
        :type="showornot"
        name="密码"
        placeholder="请输入登录密码"
      >
        <template #button>
          <span native-type="button" @click="isShow">
            <img src="~@/assets/svg/psdNo.svg" v-if="showPsd" />
            <img src="~@/assets/svg/psdYes.svg" v-else />
          </span> </template
      ></van-field>
      <div style="margin: 16px">
        <van-button round block type="info">立即登录</van-button>
      </div>
    </van-form>
    <!-- 遮罩层 -->
    <div class="mask" v-if="highlight"></div>
    <router-link to="/seekPassword" class="forgetpsd">忘记密码？</router-link>
    <div class="register">
      <span>没有账户？</span>
      <span @click="$router.push('/register')">立即注册</span>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/login";

export default {
  name: "",
  props: {},
  components: {},
  data() {
    // const testUserName = function (val, _isOk) {
    //   return /^[a-zA-Z0-9_-]{4,16}$/.test(val)
    // };
    // const testUserPsd = function (val, _isOk) {
    //   // //密码函数验证
    //   if (val.length >= 8 && val.length <= 16) {
    //     return true;
    //   } else {
    //     // this.notify = false;
    //     return false;
    //   }
    // };
    return {
      // username: "Superme233"
      userInfo: {
        nameid: "",
        password: "",
      },
      user: {},
      showPsd: true, // 密码小眼睛
      showornot: "password", // 密码显示按钮
      highlight: true, // 登录遮罩层
      notify: null, // 验证提示
      // inputInfoFormat: {
      // userName: [
      //   { requiry: true, message: "请填写用户名", trigger: "onBlur" },
      //   { validator: testUserName, trigger: "onBlur" },
      // ],
      // userPsd: [
      //   { requiry: true, message: "请填写密码", trigger: "onBlur" },
      //   { validator: testUserPsd, trigger: "onBlur", message: '' },
      // ],
      // },
    };
  },
  methods: {
    // goToSeekPassword() {
    //   console.log(1);
    //   this.$router.push('/seekPassword')
    // },
    // 登陆验证
    async onSubmit() {
      try {
        const { data } = await login(this.userInfo); // 返回用户对对象
        this.user = data[0];
        if (!this.user) {
          this.$notify({
            message: "\n用户名或密码不正确\n\n",
            color: "#fff",
            background: "#F45B5B",
            duration: 3000,
          });
        }

        if (this.user !== undefined) {
          this.$store.commit("user/setToken", this.user);
          this.$notify({
            message: "\n登陆成功\n\n",
            color: "#fff",
            background: "#68be8d",
            duration: 1000,
          });
          setTimeout(() => {
            this.$router.push("/");
          }, 1000);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 点击小眼睛
    isShow() {
      this.showPsd = !this.showPsd;
      if (this.showPsd === true) {
        this.showornot = "password";
      } else {
        this.showornot = "text";
      }
    },

    // //密码函数验证
    // testUserPsd(val) {
    //   if (val.length >= 8 && val.length <= 16) {
    //     return true;
    //   } else {
    //     // this.notify = false;
    //     return false;
    //   }
    // },
    // 输入密码时
    changePsd() {
      this.highlight = false;
    },
  },
  watch: {
    // notify() {
    //   if (this.notify === false) {
    //     this.$notify({
    //       message: "\n用户名或密码不正确\n\n",
    //       background: "#F45B5B",
    //       duration: 2000, // 时长
    //     });
    //     this.notify = true;
    //   }
    // },
  },
};
</script>
<style scoped lang="less">
@import url("~@/assets/fonts/font.css");
.main {
  height: 1624px;
  .top {
    height: 360px;
  }
  .log {
    display: flex;
    justify-content: center;
    margin-top: -64px;
  }
  .van-form {
    display: flex;
    flex-direction: column;
    margin-top: 126px;
    .van-cell {
      border-radius: 55px;
      border: 1px solid #dcbcbc;
      margin-bottom: 32px;
      margin-left: 76px;
    }
    .van-button {
      margin-left: 50%;
      transform: translateX(-50%);
      height: 88px;
      width: 598px;
      border: none;
      font-weight: 550;
      background: linear-gradient(270deg, #ff512f, #f09819);
      box-shadow: 0 6px 12px #eb323266;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
  .vanform {
    /deep/ .van-field__control {
      padding-left: 20px;
      font-family: "DINPro" !important;
      font-size: 28px;
      letter-spacing: 0.3px;
    }
    .van-cell {
      width: 598px;
      height: 88px;
    }
  }
  .mask {
    position: absolute;
    top: 949px;
    left: 77px;
    width: 598px;
    height: 88px;
    border-radius: 44px;
    background-color: rgba(255, 255, 255, 0.3);
    // background-color: #000;
  }
  .forgetpsd {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    font-size: 14px;
    color: #5c5d60;
    font-weight: 550;
    font-family: "DINPro" !important;
  }
  .register {
    margin: 165px 0 0 246px;

    font-size: 28px;
    font-family: "DINPro" !important;
    span:nth-child(1) {
      font-weight: 550;
      color: #5c5d60;
    }
    span:nth-child(2) {
      font-weight: 550;
      color: #ec5d29;
    }
  }
  .van-field__button {
    /deep/ .verCodeBtn {
      width: 18px !important;
      height: 12px !important;
      line-height: 32px !important;
      text-align: center !important;
      font-size: 13px !important;
      color: #5c5d60 !important;
      border: #ccc !important;
      border-radius: 5px !important;
      background: #fcfafa !important;
      box-shadow: none !important;
    }
  }
}
</style>
 